<template>
  <div v-if="tableData[index]">
    <h4>
      {{index+1}}# {{ handelOptions.title }}
      <i @click="showTips" class="el-icon-question"></i>
    </h4>
    <el-checkbox-group class="options" v-model="userAnswers">
      <template v-for="(option, index) in handelOptions.options">
        <el-checkbox :key="index" :label="option.index">{{getLetterByIndex(index)}}.{{option.value}}</el-checkbox
        ><br :key="'br-'+ index" />
      </template>
    </el-checkbox-group>
    <!-- {{ handelOptions.options}} -->
    <!--  -->
    <el-button-group>
      <el-button :disabled="index==0" @click="previousQuestion" size="small" type="success" icon="el-icon-arrow-left">上一题</el-button>
      <el-button :disabled="index==randomSize-1" size="small" type="success" @click="nextQusetion">下一题<i class="el-icon-arrow-right el-icon--right"></i></el-button>
    </el-button-group>

    <!--  -->
    <el-drawer
      title="我是标题"
      :modal="false"
      :visible.sync="drawer"
      size="30%"
      :with-header="false"
    >
      <div style="padding: 15px">{{tableData[index].tips}}</div>
    </el-drawer>
  </div>
</template>

<script>
import { mapActions, mapState, mapGetters,mapMutations } from "vuex";
export default {
  data() {
    return {
      userAnswers: [],
      drawer: false,
    };
  },
  computed: {
    ...mapState("study", ["index", "tableData","randomSize"]),
    ...mapGetters("study", ["handelOptions"]),
  },
  created() {
    this.getQuestionList();
  },
  methods: {
    ...mapMutations("study",["SET_INDEX"]),
    ...mapActions("study", ["getQuestionList"]),
    showTips() {
      this.drawer = true;
    },
    // TODO?
     getLetterByIndex(index) {
      return String.fromCharCode("A".charCodeAt(0) + index);
    },
    nextQusetion(){
      this.SET_INDEX(this.index+1)
      console.log(this.userAnswers.sort().join(''));
      console.log(this.handelOptions.answers);
    },
    previousQuestion(){
      this.SET_INDEX(this.index-1)
    },
  },
};
</script>

<style scoped>
.el-checkbox-group .el-checkbox {
  display: block;
  margin-bottom: 15px;
}

.options {
  margin-top: 15px;
}

.el-icon-question {
  cursor: pointer;
}
</style>